<template>
  <div ref="tabWidth" class="tab">
    <ul ref="ulWidth" class="ulWidth">
    	<li
        v-for="(item,index) in tab"
        ref="liWidth"
        :key="index"
        :class="isActive(item)?'active':''"
         @click="toRou(item,index)"
        >
      	<b class="vertical"></b>
        <span>{{item.name}}</span> 
        <i :class="item.lock?'el-icon-lock':'el-icon-unlock'" @click.prevent.stop="locked(item,index)"></i>
        <i class="el-icon-close" v-show="!item.lock" @click.prevent.stop="delRouter(item,index)"></i>
    	</li>
    	
    	
    	<i class="el-icon-arrow-down iBlock" style="font-size: 10px; border-radius: 30%; display:inline-block;width: 36px;
    		padding-left: 5px;background: gainsboro;height: 20px;line-height:25px;margin-top: 8px;margin-left: 3px;" v-if="v_showData.length>0" @click="idShowParent = !idShowParent">
    		<span style="font-size: 12px;margin-left: 3px;">{{v_showData.length}}</span>
    		<div class="showParent" v-show="idShowParent&&v_showData.length>0">
		      <div @click="toRouS(item,index)" v-for="(item,index) in v_showData" :key="index">{{item.name}}</div>
		    </div>
    	</i>  
    	
    	
    </ul>  
    
    <i class="el-icon-more" @click="isShow = !isShow"></i>
    <div class="btns" v-show="isShow">
      <div @click="colseOther">关闭其他</div>
      <div class="borderStyle" @click="colseAll()">关闭全部</div>
</div>
  </div>
</template>

<script>
import { mapState,mapMutations } from 'vuex'
export default {
  data() {
    return {
      vRoute:JSON.parse(sessionStorage.getItem("router")),
      isShow:false,
      idShowParent:false,
      isRefresh: false,
      showData:[],
      tabWidth:null,
      ulWidth:120,
      screenWidth: 1400,
      getNum:8,
      liWidth:null
    };
  },
  watch:{
  	$route(newValue, oldValue){
  		this.goRouter()
    },
	tabWidth(a,b){
//		if (this.getNum > this.tab.length) {
//			//这是向↓里拿
//			if (this.showData.length > 0) {
//				this.tab.push(this.showData[0])
//	        	this.showData.splice(0,1)
//			}
//		}
	},
	showData(a){
//		this.showData = a;
	},
	getNum(a){
//		this.set_v_num(a);
  	},
//  screenWidth(val){
//  	console.log(1)
        // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
//      if(!this.timer){
            // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
//          this.screenWidth = val;
//          this.tabWidth = val;
//          this.timer = true;
//          let that = this;
//          console.log('允许存在几个'+this.v_num)
//          console.log('存在几个'+this.tab.length)
//			this.setGetNum();
//          setTimeout(function(){
//              that.timer = false;
                //这是往↓里放
                
//              if (that.tab.length > that.getNum) {
//              	if (that.tab.length > 1) {
//              		that.showData.push(that.tab[that.tab.length - that.getNum])
//	                	that.tab.splice(that.tab.length - that.getNum,1)
//	                	
//              	}
//              }
//          },50)
//      }
// }
},
  computed:{
  	...mapState(['tab','paths','router','v_showData','v_num']),
    
  },
  mounted() {
//	var this_ = this;
//	window.addEventListener('resize', ()=>{
//   	this_.screenWidth = document.body.clientWidth
// 	})
    this.set_v_num(8)
  },
  created(){
  	this.goRouter()
  	if (this.v_showData && this.v_showData.length > 0) {
  		this.showData = this.v_showData;
  	}
  },
  methods: {
  	...mapMutations(['stateLock','addTab','stateDel','addRoutes','setPath','stateColseAll','set_v_showData','set_v_num','add_v_showData','showDataDel']),
  	setLiWidth(){
  		let sum = 0;
		for (let i = 0; i <this.$refs.liWidth.length; i ++) {
			sum += this.$refs.liWidth[i].offsetWidth;
		}
		this.liWidth = sum;
  	},
  	setGetNum(){
		this.getNum = parseInt((this.tabWidth-400)/120);
  	},
	  	colseOther() {
	        this.isShow = false;
			let newArr = this.tab.filter(item=>{
				return item.lock == true || item.path == this.$route.path
		  	})
	      	this.stateColseAll(newArr);
	      	this.set_v_showData([])
	      	this.showData = [];
	      	this.set_v_num(this.getNum);
	    },
	    colseAll() {
	      this.isShow = false;
    	//没有锁定的过滤出来
	      let newArr = this.tab.filter(item=>{
				return item.lock == true
		  })
	      if (newArr.length==0) {
		    this.stateColseAll(newArr);
		    this.$router.push('/');this.set_v_showData([]);
		    this.showData = [];
		    this.set_v_num(this.getNum);
	      }else{
	      	this.stateColseAll(newArr);this.set_v_showData([]);
	      	this.showData = [];
	      	this.set_v_num(this.getNum);
	      }
	    },
  		toRou(item,index){
  			if (item.path != this.subPath2()) {
				this.$router.push(item.path);
  			}
//			console.log(item.path)
  		},
  		toRouS(item,index){
  			if (item.path != this.subPath2()) {
//				this.showData.splice(index,1)
	  			this.$router.push(item.path);
  			}
  		},
  		goRouter(datas = null){
  			if (!datas) {
  				datas = this.$route.path
  			}
  			for (let i = 0; i < this.router.length; i ++) {
				if(this.subPath(this.subPath(datas)) == 'index'){
					this.setPath({
						'name':'首页',
						'icon':'el-icon-location'
					})
					this.addRoutes([
						{
			              path: '/index',
			              name: 'index',
			              meta: {
			                title: '全景检测',
			              },
			        },
					])
					break;
				}
				else if ((this.router[i].path).substring(1) == this.subPath(datas)) {
					this.addRoutes(this.router[i].children);
					this.setPath({
						'name':this.router[i].meta.title,
						'icon':this.router[i].meta.icon
					})
					break;
				}
			}
	    },
	    locked(item,index){
	    	if (!item.lock) {
		       	this.stateLock(index)
			}else{
		       	this.stateLock(index)
			}
	    },
	    getli(){
	    	let sum = 0;
			for (let i = 0; i <this.$refs.liWidth.length; i ++) {
				sum += this.$refs.liWidth[i].offsetWidth;
			}
			return sum
	    },
	    delRouter(item,index){
	    	let local = this.reIndex();
	    	if (!item.lock) {
	    		if(item.name == this.$route.meta.title){
					if (this.tab.length==1) {
//							this.$router.push('/')
		      		}else{
		      			this.stateDel(index)
		      			if (this.v_showData.length > 0) {
		      				this.addTab(this.v_showData[0])
				        	this.showDataDel()
						}
		      			//不是第一位
						if (local != 0) {
							this.$router.push(this.tab[index-1].path)
						} else {
							this.$router.push(this.tab[index].path)
						}
		      		}
				}else{
					this.stateDel(index)
					if (this.v_showData.length > 0) {
						this.addTab(this.v_showData[0])
			        	this.showDataDel()
					}
				}
    		}
	    },
  		//返回样式
	   isActive(route) {
//	      return route.name === this.$route.meta.title
	      return route.path === this.$route.path
	   },
  		//返回字节 
  		subPath(path){
  			let str = path.substr(1);
  			if (str.indexOf('/')!=-1) {
  				return str.substring(0,str.indexOf('/'))
  			}else{
  				return str
  			}
  		},
  		subPath2(bytes){
			const route = this.$route
	        const { meta, path } = route
			return path
		},
  		//返回下标
  		reIndex(){
			for (let i = 0; i < this.tab.length; i ++) {
				if (this.tab[i].name == this.$route.meta.title) {
					return i
				}
			}
  		},
  		//去重
  		repe(data){
  			let arr2 = data.filter((x, index,self)=>{
			  let arrids = []
			  let arrnames = []
			  data.forEach((item,i) => {
			    arrids.push(item.path)
			    arrnames.push(item.name)
			  })
			  let judgeOne = arrids.indexOf(x.path) === index
			  let judgeTwo = arrnames.indexOf(x.name) === index
			  return judgeOne || judgeTwo
			})
			return arr2
  		}
    }
  }


	                	
  
</script>




<style lang="scss" scoped>
.tags-view-item {
      display: inline-block;
      position: relative;
      cursor: pointer;
      height: 26px;
      line-height: 26px;
      border: 1px solid #d8dce5;
      color: #495060;
      background: #fff;
      padding: 0 8px;
      font-size: 12px;
      margin-left: 5px;
      margin-top: 4px;
      &:first-of-type {
        margin-left: 15px;
      }
      &:last-of-type {
        margin-right: 15px;
      }
      &.active {
        background-color: #42b983;
        color: #fff;
        border-color: #42b983;
        &::before {
          content: '';
          background: #fff;
          display: inline-block;
          width: 8px;
          height: 8px;
          border-radius: 50%;
          position: relative;
          margin-right: 2px;
        }
      }
    }
.showParent {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 32px;
    z-index: 9;
    font-size: 14px;
    width: 100px;
    padding: 3px;
    text-align: center;
    line-height: 25px;
    background-color: #fff;
    border: 1.25px solid #e1e1e1;
    div {
      cursor: pointer;
      border-bottom: 1.25px solid #e1e1e1;
    }:hover{color: blue;}
    .borderStyle {
      border-top: 1.25px solid #e1e1e1;
    }
  }

 i on{color: chartreuse;}
.tab {
	position: absolute;
	top: 0;left: 220px;		
	left: 0;width: 100%;
	  height: 32px;
  	  background: #efefef;
	  z-index: 6;
	  padding-right: 70px;
  ul{
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow-x:hidden;
    box-sizing: border-box;
    padding-right: 20px;
  }
  li span{
  	font-size: 12px; font-family: "微软雅黑";
  }
  li .vertical{
  	display: inline-block;width: 3px;height: 14px;position: relative;
  	background: gainsboro;top: 2px;border: 0;border-radius: 40%;
  }
  li i{color: darkgrey;}
  li i:hover{
  	color: dimgrey;
  }
  .iBlock{display: block; font-size: 20px;line-height: 30px;width: 30px;text-align: center;
  	background:linear-gradient(top,gainsboro,ghostwhite);
  }
  .el-icon-more {
    //关闭当前页
    position: absolute;
    top: 0;
    z-index: 9;
    right: 33px;
    font-size: 30px;
    cursor: pointer;
  }
  // 刷新当前 关闭其他 关闭全部 按钮
  .btns {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 33px;
    right: 33px;
    width: 118px;
    font-size: 14px;
    font-family: "\5FAE\8F6F\96C5\9ED1";
    height: 68px;
    padding: 3px 12px;
    text-align: center;
    line-height: 30px;
    background-color: #fff;
    border: 1.25px solid #e1e1e1;
    z-index: 10;
    div {
    	height: 28px;
      cursor: pointer;
    }:hover{color: blue;}
    .borderStyle {
      border-top: 1.25px solid #e1e1e1;
      border-bottom: 1.25px solid #e1e1e1;
    }
  }
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    li {
      position: relative;
      float: left;
      height: 30px;
      font-size: 15px;
      line-height: 32px;
      padding: 0 6px 0 12px;
      margin-left: -1px;
      border-right: 2px solid #ccc;
      cursor: pointer;
      i {
        padding-left: 6px;
      }
    }
    li.active {
      border: none;
      color: black;
      z-index: 1;
      border-top: 0;
      border-bottom: 2px solid #0077AA;
      box-shadow: 2px 0 6px #72767B;
      background-color: white;
      .vertical{
    	background: #0077AA;
    	}
    }
    li:first-child:hover{
    	border-bottom: 0;
    }
    
  }
  .closeAll {
    position: absolute;
    top: 4px;
    right: 25px;
    padding: 3px 15px;
    color: #fff;
    font-size: 13px;
    border-radius: 15px;
    cursor: pointer;
    background-color: #006080;
  }
  .other {
    position: absolute;
    top: 4px;
    right: 115px;
    padding: 3px 15px;
    color: #fff;
    font-size: 13px;
    border-radius: 15px;
    cursor: pointer;
    background-color: #006080;
  }
}
</style>

